<div id="json-tool" class="tool-content active">
    <div class="tool-header">
        <h2>JSON处理工具</h2>
        <p class="tool-description">JSON格式化、压缩、验证和编辑工具，支持折叠展开和错误检查</p>
    </div>
    
    <!-- 功能切换标签 -->
    <div class="input-tabs">
        <button class="input-tab active" data-tab="format" onclick="switchJSONTab('format')">格式化/压缩</button>
        <button class="input-tab" data-tab="validate" onclick="switchJSONTab('validate')">验证/检查</button>
        <button class="input-tab" data-tab="convert" onclick="switchJSONTab('convert')">转换</button>
    </div>

    <!-- 格式化/压缩区域 -->
    <div id="format-input" class="input-content active">
        <div class="input-section">
            <div class="input-row">
                <!-- 左侧：输入JSON -->
                <div class="input-column">
                    <div class="input-group">
                        <label>输入JSON：</label>
                        <textarea id="json-input-format" rows="10" placeholder="请输入JSON数据..."></textarea>
                    </div>
                </div>
                
                <!-- 右侧：格式化设置 -->
                <div class="settings-column">
                    <div class="settings-section">
                        <h3>格式化设置</h3>
                        <div class="form-group">
                            <label>缩进方式：</label>
                            <select id="indent-type">
                                <option value="space">空格</option>
                                <option value="tab">制表符</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>缩进大小：</label>
                            <select id="indent-size">
                                <option value="2">2</option>
                                <option value="4" selected>4</option>
                                <option value="8">8</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="actions">
                <button onclick="formatJSON()" class="primary-btn">格式化</button>
                <button onclick="compressJSON()" class="secondary-btn">压缩</button>
                <button onclick="unicodeToChinese()" class="secondary-btn">Unicode转汉字</button>
                <button onclick="clearJSONInput()" class="secondary-btn">清空</button>
            </div>
            
            <div class="input-group">
                <label>处理结果：</label>
                <textarea id="json-output-format" rows="10" readonly placeholder="处理后的JSON将显示在这里..."></textarea>
                <div class="output-actions">
                    <button onclick="copyToClipboard('json-output-format')" class="secondary-btn">复制结果</button>
                    <button onclick="downloadJSON('json-output-format')" class="secondary-btn">下载文件</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 验证/检查区域 -->
    <div id="validate-input" class="input-content">
        <div class="input-section">
            <div class="input-group">
                <label>输入JSON：</label>
                <textarea id="json-input-validate" rows="10" placeholder="请输入需要验证的JSON数据..."></textarea>
            </div>
            
            <div class="actions">
                <button onclick="validateJSON()" class="primary-btn">验证JSON</button>
                <button onclick="clearValidateInput()" class="secondary-btn">清空</button>
            </div>
            
            <div class="validation-result" id="validation-result">
                <!-- 验证结果将显示在这里 -->
            </div>
        </div>
    </div>

    <!-- 转换区域 -->
    <div id="convert-input" class="input-content">
        <div class="input-section">
            <div class="input-group">
                <label>输入JSON：</label>
                <textarea id="json-input-convert" rows="8" placeholder="请输入需要转换的JSON数据..."></textarea>
            </div>
            
            <div class="settings-section">
                <h3>转换设置</h3>
                <div class="form-row">
                    <div class="form-group">
                        <label>转换类型：</label>
                        <select id="convert-type">
                            <option value="xml">JSON转XML</option>
                            <option value="csv">JSON转CSV</option>
                            <option value="yaml">JSON转YAML</option>
                            <option value="url">JSON转URL参数</option>
                            <option value="properties">JSON转Properties</option>
                            <option value="php">JSON转PHP数组</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <div class="actions">
                <button onclick="convertJSON()" class="primary-btn">转换</button>
                <button onclick="clearConvertInput()" class="secondary-btn">清空</button>
            </div>
            
            <div class="input-group">
                <label>转换结果：</label>
                <textarea id="json-output-convert" rows="8" readonly placeholder="转换结果将显示在这里..."></textarea>
                <div class="output-actions">
                    <button onclick="copyToClipboard('json-output-convert')" class="secondary-btn">复制结果</button>
                    <button onclick="downloadJSON('json-output-convert')" class="secondary-btn">下载文件</button>
                </div>
            </div>
        </div>
    </div>
</div>